<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .btn {
            width: 50px;
            height: 25px;
        }

        .content {
            width: 200px;
            height: 100px;
            line-height: 100px;
            position: absolute;
            left: 60px;
            top: 10px;
            background-color: turquoise;
            text-align: center;
            font-size: 20px;
            display: none;
        }

        .active {
            display: block;
        }
    </style>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const tabs = {
        props: ['title', 'content'],
        data () {
            return {
                idx: 0
            }
        },
        template: `
                    <div>
                        <div v-for="(item,index) in title">
                            <button @click="handle(index)" class="btn">
                                {{item.item}}
                            </button>
                        </div>
                        <div
                        v-for="(item,index) in content" 
                        :class="{active:index==idx?true:false}" 
                        class="content">
                            {{item.item}}
                        </div>
                    </div>
                `,
        methods: {
            handle (i) {
                this.idx = i
            }
        },
    }
    let vm = {
        components: { tabs },
        data () {
            return {
                title: [
                    { item: 'html' },
                    { item: 'css' },
                    { item: 'js' },
                    { item: 'vue' },
                ],
                content: [
                    { item: 'html--content' },
                    { item: 'css--content' },
                    { item: 'js--content' },
                    { item: 'vue--content' },
                ]
            }
        },
        template: `<tabs :title="title" :content="content"></tabs>`,

    }
    Vue.createApp(vm).mount('#app')
</script>

</html>